<template>
	<view class="page">
		<view class="content" v-if="detail">
			<view class="collect" @click="collectHandle(detail)">
				<image v-if="!detail.favorite" src="/static/star1.png" mode=""></image>
				<image v-else src="/static/star.png" mode=""></image>
			</view>
			<view class="box">
				<view class="word-i">{{detail.name}}</view>
				<view class="spring d_flex a_c ">{{detail.ukSoundmark}}
					<image src="/static/lb.png" @click="spell"></image>
				</view>
				<view class="mean" v-if="detail.wordExplain">
					<view class="d_flex" v-for="item in JSON.parse(detail.wordExplain)" :key="item.id">
						<text>{{item.wordSex}}</text>
						<rich-text :nodes="item.chinExplain"></rich-text>
					</view>
				</view>
				<view class="memory" v-if="detail.mnemonic.length>0">
					<view class="label">助记：</view>
					<view class="con">
						<view v-for="(item,i) in detail.mnemonic" :key="i">
              {{item.mnemonicMethodName}}{{item.name}}
            </view>
					</view>
				</view>
				<view class="explan" v-if="detail.exampleSentence.length>0">
					<view class="tit">例句：</view>
					<view class="ex-item" v-for="(item,i) in detail.exampleSentence" :key="i">
						<view class="qes">
							<image v-if="item.trueQuestion" src="/static/zt.png" mode=""></image>
							<rich-text :nodes="item.example"></rich-text>
						</view>
						<view class="ans">
							{{item.chinExplain}}
						</view>
					</view>
				</view>
				<view class="el-item" v-if="detail.affixes.length>0">
					<view class="tit">词根词缀：</view>
					<view class="con">
						<view v-for="(item,i) in detail.affixes" :key="i">
							{{item.name}} {{item.chinExplain}}
						</view>
					</view>
				</view>
				<view class="el-item" v-if="detail.phrases.length>0">
					<view class="tit">固定搭配：</view>
					<view class="con">
						<view v-for="(item,i) in detail.phrases" :key="i">
							<text>{{item.name||''}}</text><text
								style="margin-left: 10rpx;">{{item.chinese_explain||''}}</text>
						</view>
					</view>
				</view>
				<view class="word-err" @click="wordErr">单词报错</view>
			</view>
		</view>

		<view class="page-btn">
			<view class="btn" v-if="type==0" @click="back">继续练习</view>
			<view class="btn" v-if="type==1" @click="back">继续练习</view>
			<view class="btn" v-if="type==2" @click="back">返回错词本</view>
			<view class="btn" v-if="type==3" @click="back">返回收藏夹</view>
			<view class="btn" v-if="type==4" @click="back">继续复习</view>
		</view>
	</view>
</template>

<script>
  import {handleExampleSentence} from "@/util/bizUtil";

  export default {
		data() {
			return {
				innerAudioContext: '', //音频文件
				detail: '', //单词解析内容
				id: '',
				type: 0,
				current: -1
			};
		},
		onLoad(e) {
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.autoplay = true;
			this.innerAudioContext.onError(res => {
				console.log(res.errMsg);
				console.log(res.errCode);
			});
			this.id = e.id;
			this.type = e.type;
			this.current = e.current || -1;
			this.getDetail();
		},
		onUnload() {
			if (this.current >= 0) {
				uni.setStorageSync('lxCurrent', this.current);
			}
		},
		onBackPress() {
			if (this.current >= 0) {
				uni.setStorageSync('lxCurrent', this.current);
			}
		},
		methods: {
			getDetail() {
				this.$http.get1('/api/client/word/wordDetailById', {
					id: this.id
				}).then(res => {
					if (res.code == 200) {
						this.detail.exampleSentence = handleExampleSentence(res.data)
					}
				})
			},
			wordErr() {
				uni.navigateTo({
					url: '/pagesA/pages/test/word-error?id=' + this.detail.id + '&word=' + this.detail.name
				})
			},
			back() {
				if (this.current >= 0) {
					uni.setStorageSync('lxCurrent', this.current);
				}
				uni.navigateBack();
			},
			collectHandle(val) {
				val.favorite = !val.favorite;
				this.$http.get1('/api/client/word/favoritesUpdate', {
					wordBookId: this.id,
					wordId: val.id,
					action: val.favorite ? '1' : '0'
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功'
						})
					}
				})
			},
			//拼读
			spell() {
				let that = this;
				this.$http
					.gettts('api/client/word/tts', {
						wordStr: this.detail.name,
						langType: 'en'
					})
					.then(res => {
						const fs = wx.getFileSystemManager();
						const basePath = `${wx.env.USER_DATA_PATH}/audio`;
						const audioPath = `${basePath}/${new Date().getTime()}.mp3`;
						let hasFolder = true;
						try {
							fs.accessSync(basePath);
						} catch (e) {
							hasFolder = false;
						}
						// 没有则先创建audio文件夹
						if (!hasFolder) {
							fs.mkdir({
								dirPath: basePath
							});
						}
						fs.writeFile({
							filePath: audioPath,
							data: res,
							encoding: 'binary',
							success: res => {
								that.innerAudioContext.src = audioPath;
								that.innerAudioContext.loop = false;
								that.innerAudioContext.autoPlay = false;
								that.innerAudioContext.onPlay(() => {
									console.log('开始播放');
								});
								setTimeout(()=>{
									that.innerAudioContext.stop();	
								},1000)
							}
						});
					});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F2F3F8;
	}

	.page {
		width: 100%;
		height: 100%;
		padding: 20rpx 32rpx 200rpx;
		box-sizing: border-box;
	}

	.page-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 175rpx;
		z-index: 9;
		background: #FFFFFF;
		box-shadow: inset 0rpx 1rpx 0rpx 2rpx rgba(0, 0, 0, 0.1);
		padding: 30rpx 62rpx;
		box-sizing: border-box;

		.btn {
			height: 90rpx;
			background: #5480F8;
			border-radius: 46rpx;
			width: 100%;
			text-align: center;
			line-height: 90rpx;
			color: #fff;
			font-size: 32rpx;
		}
	}

	.content {
		min-height: calc(100vh - 210rpx);
		background-color: #fff;
		box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(42, 65, 152, 0.05);
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		position: relative;
		display: flex;
		justify-content: center;

		// align-items: center;
		.collect {
			position: absolute;
			top: 30rpx;
			right: 30rpx;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.word {
			font-size: 60rpx;
			font-weight: 800;
			color: #333333;
			text-align: center;
		}

		.box {
			padding: 30rpx 0;
			box-sizing: border-box;
			width: 100%;

			.word-i {
				font-size: 60rpx;
				font-weight: 800;
				color: #333333;
			}

			.spring {
				font-size: 28rpx;
				color: #575A64;
				margin: 20rpx 0;

				image {
					position: relative;
					width: 32rpx;
					height: 32rpx;
					margin-left: 20rpx;
				}
			}

			.mean {
				font-size: 28rpx;
				color: #575A64;
				margin-bottom: 20rpx;
			}

			.memory {
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #E4E5EC;

				.label {
					font-size: 28rpx;
					font-weight: bold;
					color: #575A64;
					margin-bottom: 20rpx;
				}

				.con {
					background: rgba(84, 128, 248, 0.05);
					border-radius: 10rpx;
					border: 1rpx dashed #5480F8;
					font-size: 24rpx;
					color: #575A64;
					padding: 20rpx;
					box-sizing: border-box;
					line-height: 1.8;
				}
			}

			.explan {
				padding: 30rpx 0 10rpx;
				border-bottom: 1rpx solid #E4E5EC;

				.tit {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}

				.ex-item {
					.qes {
						margin: 20rpx 0 10rpx;
						display: flex;
						flex-wrap: wrap;

						image {
							position: relative;
							top: 4rpx;
							margin-right: 8rpx;
							width: 60rpx;
							height: 32rpx;
						}
					}

					.ans {
						font-size: 28rpx;
						color: #575A64;
						margin-bottom: 20rpx;
					}
				}
			}

			.el-item {
				.tit {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}

				padding-top: 20rpx;
				border-bottom: 1rpx solid #E4E5EC;

				.con {
					margin: 20rpx 0;

					text {
						color: #999;
						font-size: 28rpx;
					}
				}
			}

			.word-err {
				margin-top: 20rpx;
				text-align: center;
				line-height: 48rpx;
				width: 136rpx;
				height: 48rpx;
				border-radius: 46rpx;
				border: 2rpx solid #BBBFCC;
				font-size: 24rpx;
				color: #575A64;
			}
		}


	}
</style>